import { Card, Button, Modal ,Label,TextInput,Textarea} from 'flowbite-react'
import { FaBook, FaPlus } from 'react-icons/fa'

export default function CardGroupEditor({
    show,
    onClose,
    setNewDeckName,
    setNewDeckDescription,
    setShowNewDeckModal,
    handleCreateDeck,
    newDeckName,
    newDeckDescription

}) {
    return (
        <Modal
            show={show}
            onClose={() => onClose(false)}
            size="md"
        >
            <Modal.Header className="border-b">
                <h3 className="text-xl font-semibold">创建新卡片组</h3>
            </Modal.Header>
            <Modal.Body className="space-y-6">
                <div>
                    <Label htmlFor="deckName" className="mb-2 block">卡片组名称</Label>
                    <TextInput
                        id="deckName"
                        placeholder="输入卡片组名称"
                        value={newDeckName}
                        onChange={(e) => setNewDeckName(e.target.value)}
                    />
                </div>
                <div>
                    <Label htmlFor="deckDesc" className="mb-2 block">描述</Label>
                    <Textarea
                        id="deckDesc"
                        placeholder="描述这个卡片组的用途..."
                        value={newDeckDescription}
                        onChange={(e) => setNewDeckDescription(e.target.value)}
                        rows={4}
                    />
                </div>
            </Modal.Body>
            <Modal.Footer>
                <Button color="gray" onClick={() => setShowNewDeckModal(false)}>
                    取消
                </Button>
                <Button color="blue" onClick={handleCreateDeck}>
                    创建
                </Button>
            </Modal.Footer>
        </Modal>
    )
}